<template>
  <div class="post">
    <div class="head">
      <div class="avatar">
        <img :src="post.avatarUrl" alt="" />
      </div>
      <div class="desc">
        <div class="title">{{ post.title }}</div>
        <div class="time">{{ post.time }}</div>
      </div>
      <div class="btn">＋关注</div>
    </div>
    <div class="detail">
      <div class="text">
        {{ post.text }}
      </div>
      <div class="img">
        <img :src="post.imgUrl" alt="" />
      </div>
    </div>
    <div class="tag">
      <div><span class="iconfont icon-zhuanfa"></span> {{ post.znum }}</div>
      <div><span class="iconfont icon-pinglun"></span> {{ post.pnum }}</div>
      <div><span class="iconfont icon-dianzan"></span> {{ post.dnum }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "post",
  props: {
    post: Object,
  },
};
</script>
<style lang="scss" scoped>
.post {
  border-top: 1px solid #ddd;
  display: flex;
  padding: 0.24rem 0.32rem 0 0.32rem;
  flex-direction: column;
  background: white;
  .head {
    display: flex;
    .avatar img {
      width: 0.96rem;
    }
    .desc {
      margin-right: auto;
      margin-left: 0.2rem;
      .title {
        margin-top: 0.1rem;
        font-size: 0.36rem;
        @include ellipsis;
      }
      .time {
        margin-top: 0.2rem;
        font-size: 0.28rem;
        color: #ddd;
      }
    }
    .btn {
      line-height: 0.4rem;
      margin-top: 0.1rem;
      color: white;
      padding: 0.1rem 0.24rem;
      border-radius: 10%;
      background: $themeColor;
      height: 0.36rem;
    }
  }
  .detail {
    display: flex;
    flex-direction: column;
    margin-top: 0.24rem;
    .text {
      font-size: 0.32rem;
      line-height: 1.3em;
      height: 1.28rem;
      @include multellipsis(3);
    }
    .img img {
      width: 80%;
      & {
        margin-top: 0.2rem;
      }
    }
  }
  .tag {
    align-items: center;
    margin-top: 0.24rem;
    margin-bottom: 0.24rem;
    display: flex;
    & div {
      color: #bbb;
      margin-left: 0.32rem;
    }
    & div:first-child {
      margin-left: 0;
    }
  }
}
</style>